<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Friends Bookstore!</title>
<style type="text/css">
<!--
@import url(./css/global.css);
-->
</style>

<link href="./jQuery/jcarousel/style.css" rel="stylesheet" type="text/css" />
<!--
  jCarousel skin stylesheet
-->
<link rel="stylesheet" type="text/css" href="./jQuery/jcarousel/skins/ie7/skin.css" />


<!--
  jQuery library
-->
<script type="text/javascript" src="./jQuery/jquery-1.7.1.min.js"></script>

<!--
  jCarousel library
-->
<script type="text/javascript" src="./jQuery/jcarousel/lib/jquery.jcarousel.min.js"></script>
<!--
  google Maps
-->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<script type="text/javascript" src="./ajax-solr/core/Core.js"></script>
<script type="text/javascript" src="./ajax-solr/core/AbstractManager.js"></script>
<script type="text/javascript" src="./ajax-solr/managers/Manager.jquery.js"></script>
<script type="text/javascript" src="./ajax-solr/core/Parameter.js"></script>
<script type="text/javascript" src="./ajax-solr/core/ParameterStore.js"></script>
<script type="text/javascript" src="./ajax-solr/core/AbstractWidget.js"></script>
<script type="text/javascript" src="./jQuery/bs.js"></script>

<!--<script type="text/javascript" src="./jQuery/ResultWidget.js"></script>-->

<script type="text/javascript">

</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<div class="container">
  <header>
  	  <div id="header-logo" style="width=100%;height:125px;">
      	<div style="float:left">
      		<a href="bookstore.html"><img src="./images/logo.jpg" alt="Friends Bookstore" width="125" height="125" id="Insert_logo" style="background: #FFFFFF; display:block;" /></a>
      	</div>
      	<div style="float:right; margin-right:20px; margin-top:61px;">
    		<h1 style="position:relative; color:#246B47">Welcome to Friends Bookstore!</h1>  
    	</div>
    </div> 
    <div id="header-search" style="margin-right:20px; padding-top:10px;width=100%;">  	  		  
    	<div id="simplesearch" style="padding:5px;width:100%;float:right;">        
            <form action="#">
	            <div align="right" style="padding:2px; float:right;">
                    <input id = "search-submit" type="submit" value="Search" onClick="header_search(); return false;" style="background-color:#85C2A3;width:100px;height:35px;font-weight:bold;color:#FFF"/>								
                </div>
				<div align="right" style="padding:2px; float:right;">
                    <input id = "search-text" name="holder" placeholder="Search Books" style="width:300px;height:30px;font-size:14px;" />
                </div>                                               
                <div align="right" style="padding:2px; float:right;">
                    <select name="search-by" id="search-by" style="background-color:#85C2A3;width:150px;height:35px;font-size:14px;color:#FFF">
                        <option value=1>Keyword</option>
                        <option value=2>Title</option>
                        <option value=3>Author</option>
                        <option value=4>ISBN</option>
                    </select>
                </div>               
            </form>   
    	</div>  	    
    </div> 
  </header>
  <aside>
  <nav>
  <div class="search-filter">   
	<div class="wrapper"> 
  	<ul class="filter-set">
    	<li class="filter-value">
            <div class="filter-name">Books by Subject</div>
            <div class="filter-hider">
                <ul class="filter-value-set">
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:7'); return false;">Featured</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:1'); return false;">Art, Architecture &amp; Photography</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:2'); return false;">Biographies</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:3'); return false;">Business &amp; Money</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:4'); return false;">Children's Books</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:5'); return false;">Computing &amp; Internet</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:6'); return false;">Cookbooks, Food &amp; Wine</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:8'); return false;">Fiction &amp; Literature</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:9'); return false;">History</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:10'); return false;">Humor</a></span></li>                    
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:11'); return false;">Nonfiction</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:12'); return false;">Romance</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:14'); return false;">Sports &amp; Adventure</a></span></li>
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sid:13'); return false;">Self-Improvement</a></span></li>                    
                </ul>
            </div>
        </li>
		<li class="filter-value">
  			<div class="filter-name">Price Range</div>
  			<div class="filter-hider">
  				<ul class="filter-value-set">
    				<li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sprice:[* TO 10]'); return false;">Under $10</a></span></li>
    				<li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sprice:[10 TO 25]'); return false;">$10 - $25</a></span></li>    				
    				<li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sprice:[25 TO 50]'); return false;">$25 - $50</a></span></li>    				    							
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('sprice:[50 TO *]'); return false;">Over $50</a></span></li>    			                    
    			</ul>
  			</div>
    	</li>
        <li class="filter-value">
  			<div class="filter-name">Formats</div>
  			<div class="filter-hider">
  				<ul class="filter-value-set">
    				<li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('medium:Paperback'); return false;">Paperback</a></span></li>
    				<li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('medium:Hardbound'); return false;">Hardbound</a></span></li>    				
    				<li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('medium:ebook'); return false;">ebook</a></span></li>    				    							
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('medium:Audio'); return false;">Audio</a></span></li>    			                    
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('medium:Video'); return false;">Video</a></span></li>  
    			</ul>
  			</div>
    	</li>
         <li class="filter-value">
  			<div class="filter-name">Language</div>
  			<div class="filter-hider">
  				<ul class="filter-value-set">
    				<li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('language:English'); return false;">English</a></span></li>
    				<li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('language:French'); return false;">French</a></span></li>    				
    				<li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('language:German'); return false;">German</a></span></li>    				    							
                    <li class="filter-value"><span class="filter-value-a"><a href="#" onClick="gsearch('language:Spanish'); return false;">Spanish</a></span></li>    			                                                                               
    			</ul>
  			</div>
    	</li>
  	</ul>
    </div>
  </div>
  </nav>
  </aside>
  <article class="content">
	
  	<div id="maincontent" align="center" style="position:relative; width:100%;">
    		<div style="padding-top:60px; width:100%;height:40px;">
        		<div style="position:relative; width:5%;">                            
            	</div>
            	<div align="left" style="position:relative; width:90%;">
            		<h2 id="msgcont" style="position:relative; color:#246B47">Save Time! Try Advance Filters!</h2>  
        		</div>
            	<div style="position:relative; width:5%;">                            
            	</div>
        	</div>
	
	<div id="dyncont">
	    <div id="advsearch" style="width:100%;">
			<div style="position:relative; width:5%;">                            
            </div>
            <div align="left" style="padding:5px; clear:both; position:relative; width:90%;">
            <form action="#" >
            <div align="left" style="padding:5px; clear:both; position:relative; width:100%;">
            <label id="lbl-adv-search-by"  style="font-weight:bold; font-size:14px;" >KEYWORD(S)</label>
            </div>
            <div align="left" style="padding:5px; clear:both; position:relative; width:100%;">
                <div style="padding:2px; float:left;">
                <select id="adv-search1-by" name="adv-search1-by" style="background-color:#85C2A3;width:100px;height:35px;font-size:14px;color:#FFF">
                <option value=1>Any</option>
                <option value=2>Author</option>
                <option value=3>Title</option>
                <option value=4>ISBN</option>
                </select>
                </div>
                <div style="padding:2px; float:left;">
                <input id = "adv-search1-text" name="holder" placeholder="Keyword" style="width:300px;height:30px;font-size:14px;" />
                </div>
                                
                <div style="padding:2px; float:left;">
                <select name="adv-search1-opts" id="adv-search1-opts" style="background-color:#85C2A3;width:100px;height:35px;font-size:14px;color:#FFF">
                    <option>AND</option>
                    <option>OR</option>
                    <option>AND NOT</option>
                </select>
                </div>
            </div>
            <div align="left" style="padding:5px; clear:both; position:relative; width:100%;">
                <div style="padding:2px; float:left;">
                <select id="adv-search2-by" name="adv-search2-by" style="background-color:#85C2A3;width:100px;height:35px;font-size:14px;color:#FFF">
                <option value=1>Any</option>
                <option value=2>Author</option>
                <option value=3>Title</option>
                <option value=4>ISBN</option>
                </select>
                </div>
                <div style="padding:2px; float:left;">
                <input id = "adv-search2-text" name="holder" placeholder="Keyword" style="width:300px;height:30px;font-size:14px;" />
                </div>
                                            
                <div style="padding:2px; float:left;">
                    <select name="adv-search2-opts" id="adv-search2-opts" style="background-color:#85C2A3;width:100px;height:35px;font-size:14px;color:#FFF">
                        <option>AND</option>
                    	<option>OR</option>
                    	<option>AND NOT</option>
                    </select>
                </div>
            </div>
            <div align="left" style="padding:5px; clear:both; position:relative; width:100%;">
                <div style="padding:2px; float:left;">
                <select id="adv-search3-by" name="adv-search3-by" style="background-color:#85C2A3;width:100px;height:35px;font-size:14px;color:#FFF">
                <option value=1>Any</option>
                <option value=2>Author</option>
                <option value=3>Title</option>
                <option value=4>ISBN</option>
                </select>
                </div>
                <div style="padding:2px; float:left;">
                <input id = "adv-search3-text" name="holder" placeholder="Keyword" style="width:300px;height:30px;font-size:14px;" />
                </div>
                                
                <div style="padding:2px; float:left;">
                    <select name="adv-search3-opts" id="adv-search3-opts" style="background-color:#85C2A3;width:100px;height:35px;font-size:14px;color:#FFF">
                         <option>AND</option>
                    	 <option>OR</option>
                    	 <option>AND NOT</option>
                    </select>
                </div>
			</div>
			
            <div align="left" style="padding:5px; clear:both; position:relative; width:74%;">   
                  
                <div style="padding:2px; float:left;">
                	<div style="clear:both">
                		<label id ="lbl-cate" name="cate" style="font-weight:bold; font-size:14px;">Subjects</label>
                	</div>
                    <div style="padding-top:5px; clear:both">
                        <select id="category" name="category" multiple="multiple" size="4" style="background-color:#85C2A3;font-size:14px;color:#FFF">
                        <option value="1">Art, Architecture and Photography</option>
                        <option value="2">Biographies</option>
                        <option value="3">Business and Money</option>
                        <option value="4">Children's Books</option>
                        <option value="5">Computing and Internet</option>
                        <option value="6">Cookbooks, Food and Wine</option>
                        <option value="8">Fiction and Literature</option>
                        <option value="9">History</option>                                    
                        <option value="10">Humor</option>                                                                                                
                        <option value="11">Nonfiction</option>   
                        <option value="12">Romance</option>   
                        <option value="14">Sports and Adventure</option>   
                        <option value="13">Self-Improvement</option>                                                                                    
                        </select>
                	</div>
                </div>

                <div style="padding:2px; float:right;">
                	<div style="clear:both">
                		<label id ="lbl-price" name="price" style="font-weight:bold; font-size:14px;">Price</label>
                    </div>
                    <div style="padding-top:5px; clear:both">
                        <select id="price" name="price" multiple="multiple" size="4" style="background-color:#85C2A3;font-size:14px;color:#FFF">
                        <option value=1>Under $10</option>
                        <option value=2>$10 - $25</option>
                        <option value=3>$25 - $50</option>
                        <option value=4>Over $50</option>
                        </select>
                	</div>
                </div>
			</div>  
			<div align="left" style="padding:5px; clear:both; position:relative; width:74%;">   
                <div style="padding:2px; float:left;">
                	<div style="clear:both">
                		<label id ="lbl-format" name="format" style="font-weight:bold; font-size:14px;">Format</label>
                    </div>
                    <div style="padding-top:5px; clear:both">
                        <select id="format" name="format" multiple="multiple" size="4" style="background-color:#85C2A3;font-size:14px;color:#FFF">
                        <option>Paperback</option>
                        <option>Hardbound</option>
                        <option>ebook</option>
                        <option>Audio</option>
                        <option>Video</option>
                        </select>
                    </div>
                </div>
    
                <div style="padding:2px; float:right;">
                	<div style="clear:both">
                		<label id ="lbl-lang" name="lang" style="font-weight:bold; font-size:14px;">Language</label>
					</div>
                    <div style="padding-top:5px; clear:both">
                        <select id="language" name="language" multiple="multiple" size="4" style="background-color:#85C2A3;font-size:14px;color:#FFF">
                        <option>English</option>
                        <option>French</option>
                        <option>German</option>
                        <option>Spanish</option>                        
                        </select>
                	</div>
                </div>
			</div>   
			<div align="left" style="padding:10px; clear:both; position:relative; width:74%;">            
                <div style="padding:2px; float:left;">
                <input id="adv-chk-oos" type="checkbox" value="ignoreoos" name="adv-ignoreoos">
                <label id="lbl-adv-ignoreoos">Ignore Out of Stock Books</label>
                </div>
    
    
                <div style="padding:2px; float:right;">
                <label id="lbl-search-sort-by">Sort by</label>
                <select id="search-sort-by" name="search-sort-by" style="background-color:#85C2A3;width:100px;height:25px;font-size:14px;color:#FFF">
                <option value=1>Relevance</option>
                <option value=2>Author</option>
                <option value=3>Title</option>
                <option value=4>Price</option>
                </select>
                </div>
			</div>                     
            <div align="right" style="padding-top:20px; clear:both; position:relative; width:75%;">   
            <input id="adv-search-submit" type="submit" value="Advanced Search" onClick="advance_search(); return false;" style="background-color:#85C2A3;width:140px;height:35px;font-weight:bold;color:#FFF" />
            </div>
			</form>	
        	</div>
            <div style="position:relative; width:5%;">                            
            </div>
        </div>
        <div id="c1" style="width:100%;height=50px;">
            <div style="position:relative; width:5%;">                            
            </div>
            <div align="left" style="position:relative; width:90%;">
            	<h2 style="position:relative; color:#246B47">Featured Books</h2>  
        	</div>
            <div style="position:relative; width:5%;">                            
            </div>
        </div>
        <div id="c2" style="width:100%;">
             <ul id="mycarousel" class="jcarousel-skin-ie7">
                <!-- The content will be dynamically loaded in here -->
             </ul>
        </div>                
	</div>
    </div>        
  </article>
  <footer>    
    <address style="text-align:right; padding-right:10px;font:11px Arial, Helvetica, sans-serif">
      &copy; 2012 Friends Bookstore, Inc. All Rights Reserved
    </address>
  </footer>
  <!-- end .container -->
  </div>
</body>
</html>
